`の間で右クリックをして「ペースト」をクリックします。
\n次のように表示されればOKです。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\n`YOUR_APPLICATION_KEY`, `YOUR_CLIENT_KEY`の部分を書き換えます。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\n先ほど準備した ニフクラ mobile backend のタブを開きましょう。
\nアプリケーションキーの「コピー」ボタンをクリックします。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nMonacaの開発画面のタブに戻ります。
\n`YOUR_APPLICATION_KEY` をダブルクリックすると文字が青くなります。その状態で右クリックをして「貼り付け」をクリックします。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nこんな感じで書き変わればOKです!続いてもう一度同じように `YOUR_CLIENT_KEY` も書き変えます。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\n再び ニフクラ mobile backend のタブを開きましょう。
\n今度は2つ目のクライアントキーの「コピー」ボタンをクリックします。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nMonacaの開発画面のタブに戻ります。
\n先ほどと同様に、`YOUR_CLIENT_KEY` をダブルクリックすると文字が青くなります。その状態で右クリックをして「貼り付け」をクリックします。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.2. ニフクラ mobile backend の準備\n\nこれでクラウドの準備は完了です🎉\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\nコメント入力機能を追加していきましょう。
\nindex.html の bodyタグ の一番下に、次の内容をコピペします。
\n\n```HTML\n
\n \n \n
\n
\n```\n\n* ダウンロードした資料のタブを開いて、次のコードをコピーする\n* Monaca開発画面に戻って index.html の bodyタグ の一番下にペーストする\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\nこんな感じになればOKです!\n\n.center[\]\n\nこれで画面にコメント入力欄が追加されますが、まだボタンを押した後の処理をコーディングしていないので、ボタンを押しても何も動きません。\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\n送信ボタンを押すとメッセージが保存されていくように処理を書いていきましょう
\n先ほど書いた内容に続けて、scriptタグ (``)内に次の内容をコピペします。(さっきと同じようにやろう!)\n\n.size_small_5[\n```js\nfunction sendMessage() {\n var text = document.forms.messageForm.message.value;\n if(text.length === 0) {\n document.getElementById(\"log\").innerText = \"NG\";\n return false;\n }\n var MessageClass = ncmb.DataStore(\"MessageClass\");\n var messageClass = new MessageClass();\n messageClass.set(\"message\", text)\n .save()\n .then(function(){\n document.getElementById(\"log\").innerText = \"OK\"\n })\n .catch(function(err){\n document.getElementById(\"log\").innerText = \"Error:\" + err.code;\n });\n}\n```\n]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.3. コピペで機能追加\n\nこんな感じになればOKです!\n\n.center[\]\n\nこれで全て作業は完了です🎉🎉🎉正しく動くか動作を確認しましょう!\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\n.col-6[\nプレビュー画面で確認しましょう。
テストメッセージ(なんでもOK)を入力してみましょう。\n]\n.col-6[\n.center[\]\n]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\n.col-6[\n「送信」ボタンを押してみましょう。
\n結果として下に「OK」と出ればOKです!\n]\n.col-6[\n.center[\]\n]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\nクラウド側も確認してみましょう。ニフクラ mobile backend のタグを開きます。
\nAPIキー画面が表示されているので、「OK」をクリックして閉じましょう。\n\n.center[\]\n\n---\n.bottom-bar[\n 6. TRY:コメント入力機能をつけよう\n]\n\n### 6.4. 動作確認\n\nダッシュボードが表示されるので、左側の「データストア」をクリックします。
\n「MessageClass」をクリックすると、入力したデータが保存されていることを確認できます。\n\n.center[\]\n\n\n---\nlayout: true\nclass: center, middle, animation-fade\n---\n# 7. アプリを使って自己紹介しよう!\n\n---\nlayout: false\n\n.bottom-bar[\n 7. アプリを使って自己紹介しよう!\n]\n\n.col-7[\n作ったプロフィールアプリを使って、
自己紹介をしましょう😄\n\n* みんなのパソコンのプレビュー画面をのぞきにいきましょう!\n* コメントを残してあげましょう!\n* せっかく作ったアプリなので、勝手に書き変えたりはしないでね!\n* 終わったらクラウドに保存されたメッセージを確認しましょう!\n]\n.col-5[\n.center[\]\n]\n\n---\nlayout: true\nclass: center, middle, animation-fade\n---\n# まとめ\n\n---\nlayout: false\n\n.bottom-bar[\n まとめ\n]\n\n# まとめ\n## 今日できたこと!\n\n* Monacaを使ってアプリを作った!\n * HTMLの書き方を学習\n* ニフクラ mobile backend を使ってクラウドを使ってみた!\n * クラウドにデータが保存できることを学習\n\n---\n.bottom-bar[\n まとめ\n]\n\n# まとめ\n.col-7[\n## 参考書の紹介\n\n参考書「 .font_color_ncmb_blue[**Monaca と ニフクラ mobile backend で学ぶ はじめてのプログラミング ~クラウド連携アプリ開発編~**] 」は今回少しだけ使ってみた
.color_pink[__クラウド__]の詳しい使い方がのっている学習参考書です。
今日の体験では使い方の詳しい解説はできなかったので、ぜひお家に帰ってから参考書で勉強してみてくださいね👍\n]\n.col-5[\n.center[\]\n]\n", ratio: '16:9', highlightLines: true, countIncrementalSlides: false, highlightStyle: 'github' }); }